@charset "UTF-8";

.nav{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  div{
    width: 400px;
    overflow: hidden;
    img{
      vertical-align: text-bottom;
    }
    a,span{
      display: block;
      color: $cfff;
      text-decoration: none;
      text-align: center;
      width: 300px;
      font-size: 30px;
      min-height: 75px;
      line-height: 100px;
      height: 100px;
      background: $cdf3;
      margin: 0px auto;
    }
    .left,.right{
      width: 145px;
    }
    .left{
      float: left;
      margin-left: 50px;
      cursor: default;
    }
    .right{
      float: right;
      margin-right: 50px;
    }
    .line:after{
      @include inline-block;
      width: 50px;
      height: 4px;
      background-color: $cfff;
    }
    &.menu:hover,&.menu.on{
      a{
        color: $cdf3;
        background: $cfff;
        width: 400px;
        &:before{
          content: '<';
          float: left;
          margin-left: 22px;
        }
        &:after{
          content: '>';
          margin-right: 22px;
          float: right;
        }
      }
    }
  }
}